<template>
  <div class="common-warp wh100 warp-bg cost-log-warp" ref="costLogRef">
    <a-input-group compact>
      <a-date-picker v-model:value="state.data.params.eventStampStart" show-time placeholder="开始时间"
        valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY/MM/DD HH:mm:ss" style="width: 50%"
        :getPopupContainer="() => costLogRef">
        <template #suffixIcon>
        </template>
      </a-date-picker>
      <a-date-picker v-model:value="state.data.params.eventStampEnd" show-time placeholder="结束时间"
        valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY/MM/DD HH:mm:ss" style="width: 50%"
        :getPopupContainer="() => costLogRef">
        <template #suffixIcon>
        </template>
      </a-date-picker>
      <Search style="width: 100%;" @onSearch="handleSearch" :searchOptions="state.data.searchOptions"
        @change="handleChange" />
    </a-input-group>
    <List ref="myTable" v-bind="state.data" @pageChange="onPageChange"></List>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import List from './list/index.vue';
import Search from '@/components/search/index.vue';
import { usePosCostLogApi } from "@/api/index"
import { useRouter } from 'vue-router'
import type { ChargLogItem } from '@/types/pos/log';
import { useUrlParams } from "@/hooks/useUrlParams";
import moment from 'moment';
const { data } = useUrlParams()
const router = useRouter()
const costLogRef = ref()

const state = reactive({
  data: {
    list: [] as any[],
    config: {
      total: 0,         // 列表总数
      edit: false,
      del: false,
      othenBtnOne: false,
      othenBtnTwo: false,

      submit: false,
      title: 'employeeName',
      subtitle: 'employeeCode',
      content: [
        { key: '充值金额', value: 'amount' },
        { key: '充值类型', value: 'eventType' },
        { key: '充值时间', value: 'eventStamp' },
      ],
      layout: 'vertical'//开启垂直排列
    },
    params: {
      pageNum: 1,
      pageSize: 10,
      eventStampStart: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      eventStampEnd: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
    },
    searchOptions: [
      { label: '工号', value: 'employeeCode' },
      // { label: '姓名', value: 'employeeName' }
    ],
  },
  employeeCode: '',
  showDialog: false,
  searchlabel: '',
})

const getData = async () => {
  let { data: { pageNum, pageSize, total, list } } = await usePosCostLogApi(state.data.params)
  list = list || []
  state.data.list = list.map((item: ChargLogItem) => {
    return {
      ...item,
      eventStamp: moment(item.eventStamp).format('YYYY-MM-DD HH:mm:ss'),
      eventType: item.eventType === 1 ? '现金' : item.eventType === 2 ? '津贴' : '补贴'
    }
  })
  state.data.params.pageSize = pageSize
  state.data.params.pageNum = pageNum
  state.data.config.total = total
}


const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any
  conditions[selectValue] = inputValue
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData()
}
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
    eventStampStart: state.data.params.eventStampStart,
    eventStampEnd: state.data.params.eventStampEnd
  }
}

const onPageChange = ({ pageNum, pageSize }) => {
  state.data.params.pageNum = pageNum;
  state.data.params.pageSize = pageSize;
  console.log('pageNum', pageNum, 'pageSize', pageSize);
  
  getData();
}

onMounted(() => {
  document.title = '消费记录'
  getData()
  let ainput = document.querySelectorAll('.cost-log-warp .ant-picker-input input')
  ainput.forEach((item: any) => {
    item.addEventListener('focus', () => {
      item.setAttribute('readonly', 'false')
    })
  })
})


</script>
<style scoped lang='less'>
.cost-log-warp {
  :deep(.ant-picker-dropdown .ant-picker-datetime-panel) {
    flex-direction: column !important;
  }
  :deep(.ant-picker) {
    margin-bottom: 3px;
  }
}
</style>